<template>
  <div class="u-mainSidebar">
    <el-menu :default-active="defaultActive" class="el-menu-vertical-demo" theme="dark" unique-opened router
      ref='menu'
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b">
      <el-menu-item @click='closeMenu' index="/"><img src='./../../assets/icon/bs_index_icon_index@2x.png' class='icon'><span style='vertical-align: middle;padding-left: 10px;'>首页</span></el-menu-item>
      <!-- 其他管理 -->
      <el-submenu :index="v.name" v-for='(v, vIndex) in getUserList' :key='v.id'>
        <template slot="title">
          <img src='./../../assets/icon/list.png' class='icon'>
          <span>{{ v.name }}</span>
        </template>
        <el-menu-item-group v-for='asideGroup in (v.biz_type === "0111" ? type0111 : type0121)' :key='asideGroup.index'>
          <el-submenu :index='asideGroup.index'>
            <template slot='title'>
              <img :src='asideGroup.img' class='icon'>
              <span>{{ asideGroup.name }}</span>
            </template>
            <el-menu-item-group>
              <el-menu-item v-for='item in asideGroup.children' :key='item.index' @click='routerPush(item.push, vIndex)' :index="item.index">
                <i class="iconfont icon-renwu"></i>
                {{ item.name }}
              </el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </el-menu-item-group>
      </el-submenu>
    </el-menu>
  </div>
</template>

<script>
import Vue from 'vue'
import { mapMutations, mapGetters } from 'vuex'
import { type0111, type0121 } from '@/router/aside'
import oObserver from '@/util/eventBus'

export default {
  data() {
    return {
      defaultActive: '',
      type0111,
      type0121,
      listIndex: -1
    }
  },

  created() {
  },

  computed: {
    ...mapGetters(['getUserList'])
  },

  methods: {
    ...mapMutations(['setTabRoutes']),

    routerPush(type, listIndex) {
      // 如果不是同一间公司，清空 tab 和切换 firmId
      if (this.listIndex !== listIndex) {
        console.log(listIndex, this.getUserList[listIndex].id)
        this.setTabRoutes({ type: 'clear' })
        this.listIndex = listIndex
        Vue.prototype.aFirmId = this.getUserList[listIndex].id
        oObserver.dispatch('updateFirmId')
      }
      // push 到缓存里
      this.setTabRoutes({ type: 'add', obj: this.getRouterInfoAccordingName(type) })
    },

    closeMenu() {
      this.setTabRoutes({ type: 'clear' })
      this.$refs.menu.close('1')
    }
  }
}
</script>

<style lang="less">
  .u-mainSidebar {
    display: block;
    width: 200px;
    background-color: #545c64;
    overflow-y: scroll;
    height: ~"calc(100% - 60px)";
    user-select: none;
    .el-menu {
      border-right: 0;
      background: transparent;
      li {
      }
      .is-active {}
    }
    .iconfont {
      font-size: 18px;
      margin-right: 10px;
    }
    .icon {
      width: 20px;
      display: inline-block;
    }
  }
</style>
